<nz-card>
  <form nz-form [formGroup]="validateForm" (ngSubmit)="onSubmit()">
    <div nz-row style="width: 100%">
      <div nz-col nzMd="16">
        <nz-form-item style="display: none">
          <nz-form-label [nzMd]="6" nzFor="id">id</nz-form-label>
          <nz-form-control [nzMd]="18" nzErrorTip="The input is not valid id!">
            <input [(ngModel)]="form.model.id" [ngModelOptions]="{ standalone: true }" nz-input name="id" id="id" value="id" />
          </nz-form-control>
        </nz-form-item>


        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="displayName">{{ 'mxk.password.displayName' | i18n }}</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not displayName!">
            <input
              nz-input
              disabled="true"
              [(ngModel)]="form.model.displayName"
              [ngModelOptions]="{ standalone: true }"
              name="displayName"
              id="displayName"
              value="0"
            />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="username">{{ 'mxk.password.username' | i18n }}</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid username!">
            <input
              nz-input
              disabled="true"
              [(ngModel)]="form.model.username"
              [ngModelOptions]="{ standalone: true }"
              name="username"
              id="username"
            />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" nzFor="oldPassword">{{ 'mxk.password.oldPassword' | i18n }}</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="'validation.oldPassword.input' | i18n">
            <nz-input-group [nzSuffix]="suffixOldPasswordTemplate" style="width: 100%">
              <input
                [type]="oldPasswordVisible ? 'text' : 'password'"
                nz-input
                formControlName="oldPassword"
                placeholder="{{ 'validation.oldPassword.input' | i18n }}"
                [(ngModel)]="form.model.oldPassword"
                name="oldPassword"
                id="oldPassword"
              />
            </nz-input-group>
            <ng-template #suffixOldPasswordTemplate>
              <i nz-icon [nzType]="oldPasswordVisible ? 'eye-invisible' : 'eye'" (click)="oldPasswordVisible = !oldPasswordVisible"></i>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" nzFor="password">{{ 'mxk.password.password' | i18n }}</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="'validation.password.input' | i18n">
            <nz-input-group [nzSuffix]="suffixPasswordTemplate" style="width: 100%">
              <input
                [type]="passwordVisible ? 'text' : 'password'"
                nz-input
                formControlName="password"
                placeholder="{{ 'validation.password.input' | i18n }}"
                (input)="dynamicallyCheckPassword(form.model.password)"
                [(ngModel)]="form.model.password"

              />
            </nz-input-group>
            <ng-template #suffixPasswordTemplate>
              <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
            </ng-template>
            <nz-alert
              *ngIf="dynamicallyCheckPasswordErrorMsg !=''"
              nzType="warning"
              nzMessage="{{dynamicallyCheckPasswordErrorMsg}}"
              nzShowIcon
            ></nz-alert>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" nzFor="confirmPassword">{{
            'mxk.password.confirmPassword' | i18n
            }}</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="'validation.confirmPassword.input' | i18n">
            <input
              nz-input
              type="password"
              formControlName="confirmPassword"
              placeholder="{{ 'validation.confirmPassword.input' | i18n }}"
              [(ngModel)]="form.model.confirmPassword"
              (input)="dynamicallyCheckConfirm(form.model.confirmPassword)"
            />

          </nz-form-control>
        </nz-form-item>
        <nz-form-item style="width: 100%">
          <nz-form-control [nzOffset]="10" [nzSpan]="12">
            <button nz-button nzType="primary" type="submit" [nzLoading]="form.submitting">{{ 'mxk.text.save' | i18n }}</button>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col nzMd="8">
        <h2><span nz-icon nzType="lock" nzTheme="outline"></span>{{'validation.password.conformance-strength'| i18n}}</h2>
        <ul style="padding: 0 20px;">
          <li *ngFor="let item of policyMessage">{{item}}</li>
        </ul>
      </div>
    </div>

  </form>
</nz-card>

